<template>
  <div class="editpopup">
<van-cell title="我的频道">
  <template>
  <van-button @click="isEdit=!isEdit" class="edit-btn" plain color="red" type="primary" size="mini">
    {{isEdit?'完成':'编辑'}}
  </van-button>
  </template>
</van-cell>

<van-grid :gutter="10" class="my-grid"  :border="false">
  <!-- <van-grid-item  class="active"  text="文字" :icon="isEdit?'close':''" />
  <van-grid-item :icon="isEdit? 'close':''" text="文字" />
  <van-grid-item :icon="isEdit? 'close':''" text="文字" />
  <van-grid-item :icon="isEdit? 'close':''" text="文字" />
  <van-grid-item :icon="isEdit? 'close':''" text="文字" />
  <van-grid-item :icon="isEdit? 'close':''" text="文字" /> -->

<van-grid-item
:class="{active:index===active}"
:text="item.name"
:icon="isEdit ?'close':''"
v-for="(item,index) in channels"
:key="item.id"
@click="onMyClick(index,item.id)"
/>
<!-- 点击编辑删除本地 通过item.id删除 -->
</van-grid>

<van-cell title="推荐频道">
  <!-- <template>
  <van-button class="edit-btn" plain color="red" type="primary" size="mini">编辑</van-button>
  </template> -->
</van-cell>

<van-grid icon-size="0.2rem" direction="horizontal"  :gutter="10" class="my-grid" border:false>
  <!-- 渲染推荐频道 -->
  <van-grid-item icon="plus" @click="onRecommendchannels(item)" v-for="item in recommendchannels" :key="item.id" :text="item.name" />
  <!-- <van-grid-item icon="plus" text="文字" />
  <van-grid-item icon="plus" text="文字" />
  <van-grid-item icon="plus" text="文字" />
  <van-grid-item icon="plus" text="文字" />
  <van-grid-item icon="plus" text="文字" /> -->
</van-grid>
  </div>
</template>

<script>
import { getAllChannel } from '@/api/article.js'
import { Toast } from 'vant'
import { setStorage } from '@/utils/storage.js'
import { mapState } from 'vuex'// 步骤1.映射本地 判断vue里是否有user 如果有就证明登陆了
import { removeUserChannelItem, addUserSelfChannels } from '@/api/user.js'
// import {  } from '@/api/user.js'
export default {
  props: {
    channels: {
      type: Array,
      require: true
    },
    // 记录的高亮的索引
    active: {
      type: Number,
      require: true
    }
  },
  data () {
    return {
      isEdit: false,
      allchannels: []
    }
  },
  computed: {
    ...mapState(['user']), // 步骤2.  这里的user是从store index.js里拿的本地存储user: getStorage('tt-user')
    recommendchannels () {
    // 推荐列表allchannels进行筛选 然后再上面循环 推荐列表：所有列表-我的列表
      const arr = this.allchannels.filter(item => {
        const flag = this.channels.some(item2 => {
          return item2.id === item.id
        })
        return !flag
      })
      return arr
    }
  },
  created () {
    this.getAllChannel1()
  },

  methods: {
    // 点击我的频道的id删除本地
    onMyClick (index, id) {
      if (this.isEdit) { // 处于编辑状态
        if (index === 0) return
        // console.log('删除')
        // 如果删除的是 高亮前面的前面 高亮的值减1
        if (index <= this.active) { // 两个if相当于二选一
          // 删除的是高亮前面的
          this.$emit('setActive')
        }
        this.channels.splice(index, 1) // 调用步骤b
        // 删除持久化调用 下面的id封装
      } else {
        // console.log('跳转')
        // 处于非编辑状态
        this.$emit('onGo', index)
      }
    },

    // 把删除持久化封装起来
    async   deleteChannelStorage (id) { // 封装1 步骤a
      // 未登录
      if (!this.user) return setStorage('MY-CHANELS', this.channels)
      // 已登陆
      // console.log(id)
      Toast.loading({
        message: '删除中...',
        forbidClick: true,
        duration: 0 // 持续展示 toast
      })
      try {
        await removeUserChannelItem(id)
        Toast.success('删除成功')
      } catch (error) {
        Toast.fail('删除失败')
      }
    },
    async getAllChannel1 () { // 获取推荐频道
      try {
        const res = await getAllChannel()// 如果提示为定义则是未引入
        this.allchannels = res.channels// allchannels赋完值也要在data里定义 控制台下的数据
        console.log(this.allchannels)
        console.log(res)
      } catch (error) {
        Toast('获取所有推荐频道失败')
      }
    },
    // 把推荐列表加到我的频道里
    async onRecommendchannels (obj) {
      this.channels.push(obj)
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0 // 持续展示 toast
      })
      // 如判断用户已登陆 拿vue里面的user
      if (this.user) {
        console.log('登陆了')
        try {
          await addUserSelfChannels({
            id: obj.id,
            seq: this.channels.length
          })
          Toast.success('添加成功')
        } catch (err) {
          Toast.fail('添加失败')
        }
      } else {
        setStorage('MY-CHANNELS', this.channels)
        Toast.success('添加成功')
      }
    }
    // 判断用户是否登陆 登陆则做判断 未登陆我的频道内容存在本地，登陆

  }
}
</script>

<style scoped lang='less'>
.editpopup{
padding: 100px 20px 0 20px;
// width: 104px;
// height: 48px;
// /deep/.my-grid{
// width: 160px;
// height: 86px;
// background: #F4F5F6;
// border-radius: 6px;
// }
.my-grid{
// position: absolute;
// top: 0;
// right: 0;
color: #859fec;
// background-color: #fff;
}
.van-icon-close {
      font-size: 35px;
      position: absolute;
      top: -10.5px;
      right: 5px;
    }
    .van-grid-item__icon+.van-grid-item__text {
      margin-top: 0;
    }
     /deep/.active{
      .van-grid-item__text{
        color: red;
      }
  }
}
</style>
